<template>
  <div class="pageIndex">
    <div class="ivu-row">
      <div class="ivu-col">
        <img :src="adminInfo.avatarUrl" />
      </div>
      <div class="ivu-cols">
        <div class="left">
          <h4 class="ivu-typography">欢迎，管理员，祝你开心每一天！</h4>
          <div class="a1">
            <div>
              <span>用户名：</span>
              <span>{{adminInfo.username}}</span>
            </div>
            <div class="department">
              <span>所属部门：</span>
              <span>{{adminInfo.roles}}</span>
            </div>
          </div>
          <div>
            <span>手机号：</span>
            <span>{{adminInfo.tel}}</span>
          </div>
        </div>
        <div class="right">
          <Icon type="ios-sunny" color="rgb(250, 173, 20)" size="80" />
        </div>
      </div>
    </div>
    <div class="middleRight">
      <div class="on">
        <div class="onEle">
          <Icon class="onEleIcon" type="md-apps" size="14" color="#40a9ff" />
          <span>快捷操作</span>
        </div>
        <div class="onMent">
          <div class="ment">
            <Icon type="md-person" size="24" color="rgb(105, 192, 255)" />
            <span>用户管理</span>
          </div>
          <div class="ment">
            <Icon type="ios-body" size="24" color="rgb(149, 222, 100)" />
            <span>角色管理</span>
          </div>
          <div class="ment">
            <Icon type="md-list" size="24" color="rgb(255, 156, 110)" />
            <span>菜单管理</span>
          </div>

          <div class="ment">
            <Icon type="md-contacts" size="24" color="rgb(179, 127, 235)" />
            <span>租户管理</span>
          </div>

          <div class="ment">
            <Icon type="md-people" size="24" color="rgb(255, 214, 102)" />
            <span>部门管理</span>
          </div>
          <div class="ment">
            <Icon type="md-person-add" size="24" color="rgb(92, 219, 211)" />
            <span>岗位管理</span>
          </div>
          <div class="ment">
            <Icon type="md-book" size="24" color="rgb(255, 133, 192)" />
            <span>字典管理</span>
          </div>
          <div class="ment">
            <Icon type="md-settings" size="24" color="rgb(255, 192, 105)" />
            <span>参数设置</span>
          </div>
        </div>
      </div>
      <div class="middleRightUnder">
        <!-- 授权 -->
        <div class="leftOn">
          <div class="leftOnCart">
            <Icon type="md-cart" class="mdCart" size="14" color="#faad14" />
            <span style="margin-left: -11px; font-size: 14px">获取授权</span>
          </div>
          <div>
            <h5 class="typehh">Admin Cloud 商业授权</h5>
            <span class="introduce"
              >基于 Admin Plus、iCRUD 和若依的企业级多租户权限管理开发平台</span
            >
          </div>
          <div class="ivu-space" style="gap: 35px">
            <a href="https://www.iviewui.com/price">获取授权</a>
            <a href="https://www.iviewui.com/admin-cloud">查看文档</a>
            <a href="https://www.iviewui.com">官网</a>
          </div>
        </div>
        <!-- 联系客服 -->
        <div class="rightOn">
          <div class="ChatboxesKK">
            <Icon
              class="mdChatboxes"
              type="md-chatboxes"
              size="14"
              color="rgb(82, 196, 26)"
            />
            <span style="margin-left: -11px; font-size: 14px">联系客服</span>
          </div>

          <div class="kefuwechatImg">
            <img src="@/assets/images/kefuwechat.png" class="kefuwechat" />
          </div>
        </div>
        <!-- 社区 -->
        <div class="leftUnder">
          <div class="community">
            <Icon
              class="iosLink"
              type="ios-link"
              size="14"
              color="rgb(114, 46, 209)"
            />
            <span style="margin-left: -11px; font-size: 14px">社区</span>
          </div>
          <div class="communityLink">
            <div class="boke">
              <img src="@/assets/images/github.svg" />
              <span>GitHub</span>
            </div>
            <div class="boke">
              <img src="@/assets/images/csdn.svg" />
              <span>CSDN</span>
            </div>
            <div class="boke">
              <img src="@/assets/images/zhihu.svg" />
              <span>知乎专栏</span>
            </div>
            <div class="boke">
              <img src="@/assets/images/juejin.svg" />
              <span>掘金</span>
            </div>
          </div>
        </div>
        <!-- 提供支持 -->
        <div class="rightUnder">
          <img src="@/assets/images/logo-small.png" class="logoSmall" />
          <span>Powered By View Design</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    adminInfo() {
      return this.$store.state.Admin.adminInfo;
    },
  },
};
</script>
<style scoped>
.pageIndex {
  width: 100%;
  margin: 0 20px;
  margin-top: 50px;
  display: flex;
  background-color: #f5f7f9;
}
.ivu-row {
  width: 55%;
  height: 759px;
  background: #fff;
}

.middleRight {
  width: 43%;
  margin-left: 2%;
  /* background-color: #fff; */
}
.ivu-col img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 28px;
}

.ivu-cols .left {
  margin: 28px 28px 10px 0;
}

.a1 {
  display: flex;
  margin: 16px 0;
}

.a1 .department {
  margin-left: 121px;
}

.on {
  width: 100%;
  height: 300px;
  background: #fff;
}

.onEle {
  width: 100%;
  border-bottom: 1px solid #f5f7f9;
}

.onEleIcon {
  margin: 14px 20px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  background-color: #e6f7ff;
  border-radius: 50%;
}

.onMent {
  display: flex;
  flex-wrap: wrap;
  margin: 60px;
}

.ment {
  width: 25%;
  height: 61px;
  text-align: center;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  cursor: pointer;
}

.middleRightUnder {
  margin-top: 20px;
  width: 100%;
  position: relative;
  height: 500px;
}

.leftOn {
  width: 48%;
  left: 0;
  top: 0;
  position: absolute;
  height: 230px;
  background: #fff;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}

.mdCart,
.iosLink {
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  margin: 14px 20px;
}

.mdCart {
  background-color: rgb(255, 251, 230);
}

.leftOnCart,
.community,
.ChatboxesKK {
  border-bottom: 1px solid #e0dddd;
}

.typehh {
  color: rgba(0, 0, 0, 0.85);

  font-weight: 600;

  font-size: 16px;

  margin: 16px;
}

.introduce {
  padding: 0 16px;

  color: #515a6e;

  display: inline-block;
}

.ivu-space a {
  color: #2d8cf0;
}

.ivu-space {
  margin: 16px;
}

.leftUnder {
  width: 48%;
  left: 0;
  top: 250px;
  position: absolute;
  height: 155px;
  background: #fff;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}

.iosLink {
  background-color: #f9f0ff;
}

.communityLink {
  display: flex;
  margin: 25px;
}

.boke {
  width: 25%;
  height: 58px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
}

.boke img {
  width: 32px;

  height: 32px;
}

.rightOn {
  width: 48%;
  right: 0;
  top: 0;
  position: absolute;
  height: 300px;
  background: #fff;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}

.mdChatboxes {
  margin: 18px 20px;
}

.kefuwechatImg {
  width: 49%;
  height: 250px;
  display: flex;
  align-items: center;
}

.kefuwechat {
  width: 200px;
  height: 200px;
  margin-left: 50%;
}

.rightUnder {
  width: 48%;
  right: 0;
  top: 320px;
  position: absolute;
  height: 62px;
  background: #fff;
}

.logoSmall {
  width: 24px;
  height: 24px;
  margin-left: 25%;
}

.footer {
  position: absolute;
  bottom: 28px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer a {
  font-size: 14px;
  color: #808695;
  margin: 20px;
}

.aa {
  position: relative;
  bottom: 10px;
}

.footers {
  color: #808695;

  font-size: 14px;
}
</style>